<template>
    <div>
        <div>
            <canvas ref="myCanvas" class="myCanvas" v-show="isShow"></canvas>
        </div>
    </div>
</template>

<script>
    import {queryFace} from "../api/queryFace"

    export default {
        name: "AIFaceView",
        data(){
            return  {
                isShow: false
            }
        },
        mounted(){
            queryFace().then(({imageUrl,faceRectangles}) => {
                // 获取canvas元素
                let canvas = this.$refs.myCanvas;
                let ctx = canvas.getContext("2d");

                // 创建一个Image对象并设置图片源
                let image = new Image();
                image.src = imageUrl;
                canvas.width = image.width
                canvas.height = image.height

                // 图片加载完成后执行绘制操作
                image.onload = function() {
                    // 将图片绘制到canvas上
                    ctx.drawImage(image, 0, 0);

                    // 绘制矩形
                    faceRectangles.forEach(face => {
                        ctx.strokeStyle = 'red';
                        ctx.lineWidth = 2;
                        ctx.rect(face.x, face.y, face.width, face.height);
                        ctx.stroke();
                    });
                };

                this.isShow = true
            })
        }
    }
</script>

<style scoped>
   .myCanvas {
       box-shadow: 1px 1px 10px #333;
   }
</style>